<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿基米米</title>
</head>
<style type="text/css">
#play{
	margin:auto;
	height:355px;
	width:540px;
}
#play_list{
	margin:auto;
	padding:2px;
	width:530px;
	height:265px;
	display:block;
	overflow:hidden;
	border:#DEDEDE 1px solid
}
#play_list img{
	width:530px;
	height:265px;
	border:0px;
}

#play_list a{
	width:530px;
	height:265px;
	text-align:center;
}
#small_list{
	margin:auto;
	padding:2px 0 2px 3px;
	width:540px;
	height:80px;
}
.list_img a {
	float:left;
	margin:5px 4px 0 2px;
	width:95px;
	padding:2px;
	height:65px;
	text-align:center;
	text-decoration:none;
	border:1px solid orange;
	FILTER:Alpha(Opacity=80);
	opacity:0.8;
}
.list_img img{
	 width:95px;
	 height:65px;
	 border:0px;
}
.list_img a:hover {
	position:relative;
	margin:3px 2px 0 1px;
	padding:2px;
	width:95px;
	height:65px;
	border:3px solid #5C5C5C;
}

</style>
<body>
<DIV id="play">
    <div id="play_list">
        <A href="#"><img src="flash/images/01.jpg" /></A>
        <A href="#"><img src="flash/images/02.jpg" /></A>
        <A href="#"><img src="flash/images/03.jpg" /></A>
        <A href="#"><img src="flash/images/04.jpg" /></A>
        <A href="#"><img src="flash/images/05.jpg" /></A>
    </div>
    <div id="small_list">
        <div class="list_img">
            <a href="#"><img src="flash/images/mm4.jpg" /></a>
            <a href="#"><img src="flash/images/002.jpg" /></a>
            <a href="#"><img src="flash/images/003.jpg" /></a>
            <a href="#"><img src="flash/images/004.jpg" /></a>
            <a href="#"><img src="flash/images/005.jpg" /></a>
        </div>
    </div>
</DIV>    
<script type="text/javascript" language="javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery.timers-1.1.3.js"></script>
<script type="text/javascript" language="javascript"> 
var t = n = 0, count =5, donotStopFlag = 0; // 0、表示执行 1、表示停止
count= $("#play_list A").size();
$("#play_list a:not(:first-child)").hide();
$(".list_img a").eq(0).css({"position":"relative","margin":"3px 2px 0 1px","padding":"2px","width":"95px","height":"65px","border":"3px solid #5C5C5C"});
$(".list_img a").mouseover(function()
{
	var i = $(".list_img a").index(this);
	n = i;
	if (i >= count) return;
	$("#play_list a").filter(":visible").hide().parent().children().eq(i).show();
	$(this).css({"position":"relative","margin":"3px 2px 0 1px","padding":"2px","width":"95px","height":"65px","border":"3px solid #5C5C5C"}).siblings().css({"float":"left","margin":"5px 4px 0 2px","width":"95px","padding":"2px","height":"65px","text-align":"center","text-decoration":"none","border":"1px solid orange"});
	
});

$('body').everyTime(2000,'movie',showAuto);
$(".list_img a").hover(
  function () {
	if (donotStopFlag == 0)
	{
        $('body').stopTime('movie');
	}
	donotStopFlag = 0;
  },
  function () {
	$('body').everyTime(2000,'movie',showAuto);
	donotStopFlag = 0;
  }
); 	


function showAuto()
{
	n = n >= (count - 1) ? 0 : ++n;
	donotStopFlag = 1;
	$(".list_img a").eq(n).trigger('mouseover'); 
}
</script>
</body>
</html>